<template>
    <div class="personal-type" :class="roles[props.role].type">
        <p>{{ role }}</p>
    </div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
    role: {
        type: Number, 
        default: null
    }
})
const roles = [
    {
        id: 0,
        type: 'admin',
        title: '管理员'
    },
    {
        id: 1,
        type: 'teacher',
        title: '老师'
    },
    {
        id: 2,
        type: 'judge',
        title: '评委'
    },
    {
        id: 3,
        type: 'audience',
        title: '观众'
    },
]
const role = computed(() => {
    const role = roles.find(item => item.id === props.role)
    return role ? role.title : '未知'
})


</script>

<style scoped lang="scss">

.personal-type {
    width: fit-content;
    height: 25px;
    background-color: var(--color-primary);
    border-radius: 300px;
    padding: 2px 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    font-size: 14px;
    
    
    p {
    }
}
.teacher {
    background-color: var(--color-blue);
}
.audience {
    background-color: var(--color-pink);

}
.judge {
    background-color: var(--color-purple);

}
</style>